<template>
  <el-container>
    <el-container>
      <!-- 头层 -->
      <div class="topbar">
        <div class="nav">
          <ul>
            <li>
              <button type="button" class="el-button el-button--text">
                <!----><!----><span>登录</span></button
              ><span class="sep">|</span
              ><button type="button" class="el-button el-button--text">
                <!----><!----><span>注册</span>
              </button>
            </li>
            <li><a href="#/order" class="">我的订单</a></li>
            <li><a href="#/collect" class="">我的收藏</a></li>
            <li class="shopCart">
              <a href="#/shoppingCart" class=""
                ><i class="el-icon-shopping-cart-full"></i> 购物车
                <span class="num">(0)</span></a
              >
            </li>
          </ul>
        </div>
      </div>
      <!-- 搜索栏层 -->
      <el-header class="el-header" style="height: 60px">
        <ul role="menubar" class="el-menu-demo el-menu--horizontal el-menu">
          <div class="logo" tabindex="0">
            <img src="../imgs/Logo.png" alt="" />
          </div>
          <li
            role="menuitem"
            tabindex="0"
            class="el-menu-item is-active"
            style="
              border-bottom-color: rgb(64, 158, 255);
              color: rgb(64, 158, 255);
            "
          >
            首页
          </li>
          <li
            role="menuitem"
            tabindex="0"
            class="el-menu-item"
            style="border-bottom-color: transparent"
          >
            全部商品
          </li>
          <li
            role="menuitem"
            tabindex="0"
            class="el-menu-item"
            style="border-bottom-color: transparent"
          >
            关于我们
          </li>
          <div class="so" tabindex="0">
            <div class="el-input el-input-group el-input-group--append">
              <!----><input
                type="text"
                autocomplete="off"
                placeholder="请输入搜索内容"
                class="el-input__inner"
              /><!----><!---->
              <div class="el-input-group__append">
                <button type="button" class="el-button el-button--default">
                  <!----><i class="el-icon-search"></i
                  ><!---->
                </button>
              </div>
              <!---->
            </div>
          </div>
        </ul>
      </el-header>
      <el-container>
        <el-aside class="photo">Aside</el-aside>
        <el-main>
            <div class="data">
            <h1 class="name">Redmi K30</h1>
            <p class="intro">
                120Hz高帧率流速屏/ 索尼6400万前后六摄 / 6.67'小孔径全面屏 / 最高可选8GB+256GB大存储 / 高通骁龙730G处理器 / 3D四曲面玻璃机身 / 4500mAh+27W快充 / 多功能NFC
            </p>
            <p class="store">就爱自营产品</p>
            <div class="price">
                <span>1599元</span>
            </div>
            <div class="pro-list">
                <span class="pro-name">Redmi K30</span>
                <span class="pro-price">
                    <span>1599元</span>
                </span>
                <p class="price-sum">总计:1599元</p>
            </div>
            <div class="button">
                <el-button type="button" class="shop">
                    <span>加入购物车</span>
                </el-button>
                <el-button type="button" class="like">
                    <span>收藏</span>
                </el-button>
            </div>
            <div class="pro-policy">
                <ul>
                    <li><i class="el-icon-circle-check"></i>就爱自营</li>
                    <li><i class="el-icon-circle-check"></i>顺丰包邮</li>
                    <li><i class="el-icon-circle-check"></i>七天无理由退货</li>
                    <li><i class="el-icon-circle-check"></i>七天价格保修</li>
                </ul>
            </div>
        </div>
        </el-main>
      </el-container>
          <el-footer>
      <div style="width: 300px; margin: 0 auto; padding: 20px 0">
        <a
          target="_blank"
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=35018202000233"
          style="
            display: inline-block;
            text-decoration: none;
            height: 20px;
            line-height: 20px;
          "
          ><img
            src="https://jkd.link/img/%E5%A4%87%E6%A1%88%E5%9B%BE%E6%A0%87.png"
            style="float: left"
          />
          <p
            style="
              float: left;
              height: 20px;
              line-height: 20px;
              margin: 0px 0px 0px 5px;
              color: #939393;
            "
          >
            闽公网安备35018202000233号
          </p>
        </a>
        <a
          target="_blank"
          href="https://beian.miit.gov.cn/#/Integrated/recordQuery"
          style="
            display: inline-block;
            text-decoration: none;
            height: 20px;
            line-height: 20px;
          "
        >
          <p
            style="
              float: left;
              height: 20px;
              line-height: 20px;
              margin: 0px 0px 0px 5px;
              color: #939393;
            "
          >
            闽ICP备2020020768号
          </p>
        </a>
      </div>
    </el-footer>
    </el-container>
  </el-container>
</template>

<script>
</script>

<style>
/* 头部和搜索栏 */
* {
  margin: 0;
  border: none;
  list-style: none;
}
a,
a:hover {
  text-decoration: none;
}
.topbar {
  height: 40px;
  background-color: #3d3d3d;
  margin-bottom: 20px;
}
.topbar .nav {
  width: 1225px;
  margin: 0 auto;
}
.topbar .nav ul {
  float: right;
}
.topbar .nav li {
  float: left;
  height: 40px;
  color: #b0b0b0;
  font-size: 14px;
  text-align: center;
  line-height: 40px;
  margin-left: 20px;
}
.topbar .nav .sep {
  color: #b0b0b0;
  font-size: 12px;
  margin: 0 5px;
}
.topbar .nav li .el-button {
  color: #b0b0b0;
}
.topbar .nav .el-button:hover {
  color: #fff;
}
.topbar .nav li a {
  color: #b0b0b0;
}
.topbar .nav a:hover {
  color: #fff;
}
.topbar .nav .shopCart {
  width: 120px;
  background: #424242;
}
.topbar .nav .shopCart:hover {
  background: #fff;
}
.topbar .nav .shopCart:hover a {
  color: #ff6700;
}
.topbar .nav .shopCart-full {
  width: 120px;
  background: #ff6700;
}
.topbar .nav .shopCart-full a {
  color: #fff;
}
.el-header .el-menu {
  max-width: 1225px;
  margin: 0 auto;
}
.el-header .logo {
  height: 62px;
  width: 75px;
  float: left;
  margin-right: 10px;
}
.el-header .so {
  margin-top: 10px;
  width: 300px;
  float: right;
}
/* 详情图 */
.photo{
  background-color: #99a9bf;
  width: 500px !important;
  height: 550px;
  margin-left: 110px;
  margin-top: 10px;;
}
/* 详情资料 */
.data{
  float: left;
  margin-left: 50px;
  width: 640px !important;
}
.name {
  height: 30px;
  line-height: 30px;
  font-size: 24px;
  font-weight: 400;
  color: #212121;
}
.intro {
  color: #b0b0b0;
  padding-top: 10px;
}
.store {
  color: #ff6700;
  padding-top: 10px;
}
.price {
  display: block;
  font-size: 18px;
  color: #ff6700;
  border-bottom: 1px solid #e0e0e0;
  padding: 25px 0 25px;
}

.pro-list {
  background: #f9f9fa;
  padding: 30px 60px;
  margin: 50px 0 50px;
}
.pro-list span {
  line-height: 30px;
  color: #616161;
}
.pro-price {
  float: right;
}

.price-sum {
  color: #ff6700;
  font-size: 24px;
  padding-top: 20px;
}
.button {
  height: 55px;
  margin: 10px 0 20px 0;
}
.button .el-button {
  float: left;
  height: 55px;
  font-size: 16px;
  color: #fff;
  border: none;
  text-align: center;
}
.button .shop{
  width: 340px;
  background-color: #ff6700;
}
.button .shop:hover {
  background-color: #f25807;
}
.button .like {
  width: 260px;
  margin-left: 40px;
  background-color: #b0b0b0;
}
.button .like:hover {
  background-color: #757575;
}
.pro-policy li {
  float: left;
  margin-right: 20px;
  color: #b0b0b0;
}

/* 备案号 */
.el-header .el-menu {
  max-width: 1225px;
  margin: 0 auto;
}
.el-header .logo {
  height: 62px;
  width: 75px;
  float: left;
  margin-right: 10px;
}
.el-header .so {
  margin-top: 10px;
  width: 300px;
  float: right;
}
.el-footer {
  background-color: #3d3d3d;
  height: 80px !important;
  margin-top: 20px;
}
</style>
